<template>
	<div class="specialList">
		<div class="list" @click="toSpecialDetail(item.id)" v-if="$route.name === 'index'">
			<img :src="item.pic" alt="">
			<p class="title" v-if="title">{{ title }}</p>
			<p class="desc">{{ item.descript }}</p>
		</div>
		<div class="list1" @click="toSpecialDetail(item.id)" v-if="item && $route.name === 'special'">
			<img :src="item.pic" alt="">
			<p class="title" v-if="title">{{ title }}</p>
			<p class="desc">{{ item.descript }}</p>
			<p class="ck">查看详情</p>
			<div class="blank"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'specialList',
	props: ['item'],
	data() {
		return {
			title: ''
		};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {
		this.setTitle();
	},
	methods: {
		setTitle() {
			if (this.item) {
				this.title = this.item.title;
				this.title = this.title.replace(/&mdash;/g, '—');
			}
		},
		toSpecialDetail(id) {
			this.$router.push({path: '/index/specialDetail', query: {id}});
		}
	}
};
</script>

<style lang="scss" scoped>
.specialList {
  .list {
    margin-left: 0.625rem;

    img {
      width: 19.921875rem;
      height: 12.8rem;
      border-radius: 0.375rem;
    }

    .title {
      color: #2c2c2c;
      font-size: 0.8125rem;
      margin-top: 0.6rem;
    }

    .desc {
      color: #a8a8a8;
      font-size: 0.75rem;
      margin-top: 0.6rem;
      width: 14.6025rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .list1 {
    height: 11.943125rem;
    box-sizing: border-box;
    padding: 0.375rem 0.375rem 0;
    color: #fff;
    position: relative;

    .blank {
      height: 0.75rem;
    }

    img {
      width: 100%;
      height: 100%;
    }

    p {
      position: absolute;
      width: 18.75rem;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .title {
      font-size: 1.171875rem;
      top: 3.75rem;
    }

    .desc {
      font-size: 0.90144375rem;
      top: 5.75rem;
    }

    .ck {
      width: 4.9925em;
      height: 1.836875rem;
      line-height: 1.836875rem;
      border: 1px solid #fff;
      top: 7.75rem;
      border-radius: 1.836875rem;
    }
  }
}
</style>